/**
 * 跑步
 */
require('../fonts/iconfont.css')
require('../css/run.less')
console.log("run.js");
document.ready(function () {

    // 添加底部导航
    window.utils.addTabs('sports')
    // 添加顶部导航
    window.utils.addTopNav('run')
    /* 跑步封面地图 */
    function initRunMap() {
        // 创建地图实例  
        const map = new BMap.Map("mapcontainer");

        const geolocation = new BMap.Geolocation() // 得到一个位置对象
        // 调用方法获取当前位置
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) { // 定位成功

                // 获取经纬度
                let lng = r.longitude // 经度
                let lat = r.latitude // 纬度

                // 创建点坐标  
                const point = new BMap.Point(lng, lat); // 经度和纬度
                // 初始化地图，设置中心点坐标和地图级别 
                map.centerAndZoom(point, 18);

            } else { // 定位失败
                window.utils.showToast('err', '定位失败，重新定位', 2000)
            }
        })

    }
    initRunMap()

    /* 获取dom */
    const runNum = document.querySelector('#runNum') // 跑步距离
    const cicleGo = document.querySelector('#cicleGo') // go按钮
    const numCountdown = document.querySelector('#numCountdown') // 倒计时数字

    // 三个蒙层
    const countdownMask = document.querySelector('#countdownMask') // 倒计时
    const sportPanel = document.querySelector('#sportPanel') // 运动数据

    // 跑步
    const runTimeNum = document.querySelector('#runTimeNum') // 跑步用时

    // 暂停 & 继续 & 结束
    const iconStop = document.querySelector('#iconStop') // 暂停
    const iconContinue = document.querySelector('#iconContinue') // 继续
    const iconOver = document.querySelector('#iconOver') // 结束
    const btns = document.querySelector('#btns') //  继续 & 结束 容器

    // 地图模式
    const iconMap = document.querySelector('#iconMap') // 切换到地图模式小icon
    const mapState = document.querySelector('#mapState') // 地图模式 -蒙层
    const mapCard = document.querySelector('#mapCard') // 地图模式 -蒙层
    const backBtn = document.querySelector('#backBtn') // 地图模式 -蒙层
    const completeBtn = document.querySelector('#completeBtn') // 地图模式 -蒙层
    const cardTime = document.querySelector('#cardTime') // 地图模式 - 时间
    const sportDate = document.querySelector('#sportDate') // 地图模式 - 日期


    const runDistanceNum = document.querySelector('#runDistanceNum') // 跑步距离
    const paceNum = document.querySelector('#paceNum') // 配速
    const calorieNum = document.querySelector('#calorieNum') // 卡路里

    const cardDistance = document.querySelector('#cardDistance') // 跑步距离  -- 卡片
    const cardPace = document.querySelector('#cardPace') // 配速 -- 卡片
    const cardCalorie = document.querySelector('#cardCalorie') // 卡路里 -- 卡片

    // 渲染日期
    sportDate.textContent = window.utils.getDate(new Date())




    /* 获取累计跑步距离 */
    function getRunData() {
        let userId = window.localStorage.getItem('userId')
        window.$http.get(`sports/exerciseData?id=${userId}`, function (res) {
            if (res.status === 0) {
                runNum.textContent = res.data.runkm // 渲染跑步距离
            }
        })
    }
    getRunData() // 调用获取数据函数


    /* 倒计时 */
    cicleGo.addEventListener('click', function () {
        countdownMask.style.display = 'block' // 显示倒计时蒙层
        let numArr = [3, 2, 1, 'GO'] // 定义一个数组
        let index = 0; // 索引
        numCountdown.textContent = numArr[index] // 渲染一次
        // 倒计时
        let intervalId = setInterval(function () {
            index++;
            numCountdown.textContent = numArr[index] // 渲染

            if (index > 3) {
                clearInterval(intervalId) // 清除定时器
                countdownMask.style.display = 'none' // 隐藏倒计时蒙层
                sportPanel.style.display = 'block' // 显示运动数据面板蒙层
                startRun() // 倒计时结束 开始跑步
            }
        }, 1000)
    })

    /* 声明变量 */
    let runTime = 0; // 跑步时间
    let runIntervalId = null; // 跑步定时器id
    let interval = 0.00001; // 模拟运动变化
    let pointArr = []; // 保存实时获取到的经纬度的坐标
    let count = 0; // 定位的次数
    let runDistance = 0; // 跑步距离
    let pace; // 配速
    let calorie; // 卡路里

    // 初始化地图
    const map = new BMap.Map("mapState");

    /* 获取位置函数 */
    function getLocation() {
        const geolocation = new BMap.Geolocation() // 获取一个位置对象
        // 调用方法 获取当前位置
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // 获取当前位置经纬度  [模拟运动 真实情况 不要]
                let lng = parseFloat(r.longitude) + interval
                let lat = parseFloat(r.latitude) + interval
                interval += 0.00001;

                // 把经纬度保存进入数组
                pointArr.push({
                    lng: lng,
                    lat: lat
                })

                const point = new BMap.Point(lng, lat) // new一个点对象
                map.centerAndZoom(point, 18) //  设置中心点坐标和地图级别

                if (count === 0) {
                    console.log('绘制运动的起点')
                    // 绘制起点
                    const point = new BMap.Point(pointArr[0].lng, pointArr[0].lat)
                    window.utils.addMarker(map, point, require('../img/start.png'))
                } else {
                    // 绘制线条
                    window.utils.drawLine(map, pointArr[count - 1], pointArr[count])
                }
                count++;
            } else {
                window.utils.showToast('err', '定位失败', 2000)
            }
        });
    }

    /* 开始跑步 */
    function startRun() {
        runIntervalId = setInterval(function () {
            runTime += 1;
            let t = window.utils.formatTime(runTime) // 格式化跑步时间
            runTimeNum.textContent = t // 渲染跑步时间
            cardTime.textContent = t // 渲染跑步时间 -- 地图模式

            // 渲染跑步距离
            if (pointArr.length) {
                runDistance = window.utils.calcDistance(pointArr[0], pointArr[pointArr.length - 1])
                runDistanceNum.textContent = runDistance // 渲染跑步距离
                cardDistance.textContent = runDistance // 选人跑步距离 - 地图模式
            }

            // 渲染配速
            pace = window.utils.calcPace(runDistance, runTime)
            paceNum.textContent = pace
            cardPace.textContent = pace

            // 渲染卡路里
            calorie = window.utils.calCalorie(runDistance)
            calorieNum.textContent = calorie;
            cardCalorie.textContent = calorie;

            getLocation() // 运动过程中 实时获取位置
        }, 1000)
    }


    /* 暂停 */
    iconStop.addEventListener('click', function () {
        clearInterval(runIntervalId) // 清除定时器
        iconStop.style.display = 'none' // 隐藏暂停按钮
        btns.style.display = 'block' // 显示继续 & 结束按钮
    })

    /* 继续 */
    iconContinue.addEventListener('click', function () {
        startRun() // 继续
        btns.style.display = 'none' // 隐藏继续 & 结束按钮
        iconStop.style.display = 'block' // 显示暂停按钮
    })

    /* 结束 */
    iconOver.addEventListener('click', function () {
        clearInterval(runIntervalId) // 清除定时器
        mapState.style.display = 'block' // 显示地图蒙层
        backBtn.style.display = 'none' // 隐藏返回按钮
        completeBtn.style.display = 'block' // 显示完成按钮
        mapCard.style.display = 'block' // 显示地图卡片

        getLocation() // 获取一次位置

        // 绘制终点
        const point = new BMap.Point(pointArr[pointArr.length - 1].lng, pointArr[pointArr.length - 1].lat)
        window.utils.addMarker(map, point, require('../img/end.png'))
    })

    /* 切换地图模式 - 点击icon */
    iconMap.addEventListener('click', function () {
        mapState.style.display = 'block' // 显示地图蒙层
        backBtn.style.display = 'block' // 显示返回按钮
        completeBtn.style.display = 'none' // 隐藏完成按钮
        mapCard.style.display = 'block' // 显示地图模式卡片
        getLocation() // 获取一次位置
    })

    /* 返回 */
    backBtn.addEventListener('click', function () {
        mapState.style.display = 'none' // 隐藏地图蒙层
        backBtn.style.display = 'none' // 隐藏返回按钮
        completeBtn.style.display = 'none' // 隐藏完成按钮
        mapCard.style.display = 'none' // 隐藏卡片
    })

    /* 完成 */
    completeBtn.addEventListener('click', function () {
        console.log('发送ajax，把这一次跑步的数据发送给后端保存')
        let params = {
            id: window.localStorage.getItem('userId'),
            type: 1,
            takeTime: runTime,
            miles: runDistance,
            averagerate: runDistance / runTime,
            calorie: calorie,
        }

        // 发送ajax 保存运动数据
        window.$http.post('sports/save', params, function (res) {
            if (res.status === 0) {
                window.utils.showToast('succ', '保存运动数据成功', 2000)

                setTimeout(function () {
                    window.location.href = './run.html'
                }, 2000)
            }
        })
    })
})